<template>
	<div class="advantage-box" id="advantage">
		<div class="adva-content">
			<div class="container">
				<div class="row">
					<div class="col-md-3 col-sm-6 col-xs-6">
						<h1 class="icon-img"><img src="../../assets/images/dashuju-icon.png"></h1>
						<h2 class="adva-title">大数据</h2>
						<h5 class="adva-sub">全方位提供区块链</h5>
						<h5 class="adva-sub">资料、快讯、研报</h5>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-6">
						<h1 class="icon-img"><img src="../../assets/images/rengonzhineng-icon.png"></h1>
						<h2 class="adva-title">人工智能</h2>
						<h5 class="adva-sub">升级传统评级</h5>
						<h5 class="adva-sub">识别违约风险</h5>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-6">
						<h1 class="icon-img"><img src="../../assets/images/shishipingji-icon.png"></h1>
						<h2 class="adva-title">实时评级</h2>
						<h5 class="adva-sub">随时随地</h5>
						<h5 class="adva-sub">警惕风险</h5>
					</div>
					<div class="col-md-3 col-sm-6 col-xs-6">
						<h1 class="icon-img"><img src="../../assets/images/xueshuyanjiu-icon.png"></h1>
						<h2 class="adva-title">学术研究</h2>
						<h5 class="adva-sub">脚踏实地</h5>
						<h5 class="adva-sub">与时俱进</h5>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {particleground} from '../../../static/js/jquery.particleground.min.js'
	export default{
		mounted:function(){
			$('#advantage').particleground({
				dotColor: '#eae8e8',
				lineColor: '#ececec'
			});
		}
	}
	/* 监听窗口变化 */
	window.onresize=function(){
		let w  = document.body.clientWidth;
		if(w>766){
			$('.pg-canvas').height(416)
		}
		if(w<766){
			$('.pg-canvas').height(540)
		}
		if(w<576){
			$('.pg-canvas').height(930)
		}
	}
</script>
<style scoped="scoped">
	.adva-sub{
		margin-bottom: 10px;
		font-size: 14px;
		color: #999999;
	}
	.adva-title{
		margin-bottom: 30px;
		font-size: 24px;
	}
	.icon-img{
		margin-bottom: 26px;
	}
	
	.adva-content{
		position: absolute;
		left: 0;
		top: 110px;
		width: 100%;
		overflow: hidden;
	}
	
	
	
	@media (max-width: 2058px){
		.advantage-box{
			position: relative;
			width: 100%;
			min-height: 418px;
			background-color: #FFFFFF;
		}
	}
	@media (max-width: 768px){
		.advantage-box{
			position: relative;
			width: 100%;
			min-height: 518px;
			background-color: #FFFFFF;
		}
	}
	@media screen and (max-width: 414px) {
		.advantage-box{
			position: relative;
			width: 100%;
			min-height: 930px;
			background-color: #FFFFFF;
		}
	}
	@media screen and (max-width: 375px) {
		.advantage-box{
			position: relative;
			width: 100%;
			min-height: 930px;
			background-color: #FFFFFF;
		}
	}
	
	
</style>